<%--
  Created by IntelliJ IDEA.
  User: YanHilin
  Date: 2020/5/11
  Time: 20:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>知识区</title>
    <base href="http://localhost:8080/onlineflower/">
    <%@include file="/page/comment/head.jsp" %>
    <style type="text/css">
        #nav {
            background-color: palevioletred;
            font-size: 20px;
            font-weight: bolder;
        }

        #content {
            width: 90%;
        }

        #con1 {
            border: 1px solid darkblue;
            font-size: 18px;
            color: black;
            background-color: rgb(52, 58, 64);
        }

        .row {
            margin-top: 30px;
            margin-left: 40px;
            margin-top: 100px;
        }

        a {
            color: white;
        }

        .left {
            float: left;
            height: 200px;
            width: 310px;
            border-right: 2px solid black;
        }

        .right {
            width: 100%;
        }

        .wrap {
            height: 310px;
            border: 2px solid black;
        }

        .foot {
            height: 300px;
            width: 100%;
            background-color: antiquewhite;
            margin-top: 20px;
            text-align: center;
        }
        img{
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<%@include file="/page/cmain/head_nav.jsp" %>
<div id="content" class="row">
    <div id="con1" class="col-2">
        <div class="nav flex-column nav-pills bg-dark" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
               aria-controls="v-pills-home" aria-selected="false">玫瑰</a>
            <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab"
               aria-controls="v-pills-profile" aria-selected="false">满天星</a>
            <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab"
               aria-controls="v-pills-messages" aria-selected="false">向日葵</a>
            <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab"
               aria-controls="v-pills-settings" aria-selected="false">康乃馨</a>
            <a class="nav-link" id="forget-tab" data-toggle="pill" href="#forget" role="tab"
               aria-controls="v-pills-home" aria-selected="false">勿忘我</a>
            <a class="nav-link" id="Hyacinth-tab" data-toggle="pill" href="#Hyacinth" role="tab"
               aria-controls="v-pills-profile" aria-selected="false">风信子</a>
            <a class="nav-link" id="grandiflorum-tab" data-toggle="pill" href="#grandiflorum" role="tab"
               aria-controls="v-pills-messages" aria-selected="false">桔梗花</a>
            <a class="nav-link" id="hydrangeas-tab" data-toggle="pill" href="#hydrangeas" role="tab"
               aria-controls="v-pills-settings" aria-selected="false">绣球花</a>
            <a class="nav-link" id="Kapok-tab" data-toggle="pill" href="#Kapok" role="tab" aria-controls="v-pills-home"
               aria-selected="false">木棉花</a>
            <a class="nav-link" id="narcissus-tab" data-toggle="pill" href="#narcissus" role="tab"
               aria-controls="v-pills-profile" aria-selected="false">水仙花</a>
            <a class="nav-link" id="ff-tab" data-toggle="pill" href="#ff" role="tab" aria-controls="v-pills-messages"
               aria-selected="false">绿植</a>
            <a class="nav-link" id="dd-tab" data-toggle="pill" href="#dd" role="tab" aria-controls="v-pills-settings"
               aria-selected="false">其他</a>
        </div>
    </div>
    <div class="col-1"></div>
    <div class="col-9">
        <div class="tab-content" id="v-pills-tabContent">
            <%--第1项--%>
            <div class="tab-pane fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                <div>
                    <h4>玫瑰在植物分类学上是指蔷薇科蔷薇属灌木（Rosa
                        rugosa），极具观赏价值。玫瑰在日常生活中是蔷薇属一系列花大艳丽的栽培品种的统称，这些栽培品种在植物分类学上应称做月季或蔷薇。真正的红玫瑰是不存在的。切花红玫瑰实为月季。花草茶红玫瑰多为平阴玫瑰，严格来讲不是红色而是紫红。红玫瑰是保加利亚和伊拉克的国花。</h4>
                </div>
                <%--1-1红玫瑰--%>
                <div class="wrap">
                    <div class="left">
                        <img src="static/imges/flower/玫瑰/玫瑰1.jpg" alt="" height="300px" width="300px">
                    </div>
                    <div class="right">
                        <h3>&nbsp;&nbsp;红玫瑰</h3>
                        <p>&nbsp;&nbsp;花语</p>
                        <p>我爱你、热恋，希望与你泛起激情的爱</p>
                    </div>
                </div>
                <br/>
                <%--1-2--%>
                <div class="wrap">
                    <div class="left">
                        <img src="static/imges/flower/玫瑰/白玫瑰.jpg" alt="" height="300px" width="300px">
                    </div>
                    <div class="right">
                        <h3>&nbsp;&nbsp;白玫瑰</h3>
                        <p>&nbsp;&nbsp;花语</p>
                        <p>纯洁，浪漫，求爱之花，以及我足以与你相配</p>
                    </div>
                </div>
                <br/>
                <%--1-3--%>
                <div class="wrap">
                    <div class="left">
                        <img src="static/imges/flower/玫瑰/玫瑰香槟色2.jpg" alt="" height="300px" width="300px">
                    </div>
                    <div class="right">
                        <h3>&nbsp;&nbsp;香槟玫瑰</h3>
                        <p>&nbsp;&nbsp;花语</p>
                        <p>爱上你是我今生最大的幸福，想你是我最甜蜜的痛苦，和你在一起是我的骄傲，没有你的我就像一只迷失了航线的船。</p>
                    </div>
                </div>
                <br/>
                <%--1-4--%>
                <div class="wrap">
                    <div class="left">
                        <img src="static/imges/flower/玫瑰/玫瑰紫色1.png" alt="" height="300px" width="300px">
                    </div>
                    <div class="right">
                        <h3>&nbsp;&nbsp;紫玫瑰</h3>
                        <p>&nbsp;&nbsp;花语</p>
                        <p>神秘、高贵，给人带来一种镇静从容的感觉。还有安静守护爱情的意思，或者等待爱情到来，伴随着忧郁的感觉。你的幸福比我重要也是花语的一种，表示成熟的爱。</p>
                    </div>
                </div>
            </div>

            <%--第2项满天星--%>
            <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                <div class="card">
                    <div class="card-header"><h2>满天星</h2></div>
                    <div class="card-body">
                        <p class="card-title">生于海拔1100-1500米河滩、草地、固定沙丘、石质山坡及农田中。
                            该种的生命力极强，生根快。宜在向阳环境和疏松肥沃、排水良好的微碱性砂壤土生长，土壤要求疏松，富含有机质，含水量适中，pH值7左右。</p>
                        <p class="card-text">满天星是清雅之士所喜爱的花卉，素蕴含“清纯、致远、浪漫”之意。</p>
                        <img src="static/imges/flower/满天星/满天星白色1.jpg" class="img-fluid" width="300px" height="300px">
                        <img src="static/imges/flower/满天星/满天星粉色1.jpg" alt="" width="300px" height="270px">
                        <img src="static/imges/flower/满天星/满天星紫色.jpg" alt="" width="300px" height="270px">
                    </div>
                </div>
            </div>

            <%--第3项向日葵--%>
            <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                <div class="card">
                    <div class="card-header"><h2>向日葵</h2></div>
                    <div class="card-body">
                        <p class="card-title">生于海拔1100-1500米河滩、草地、固定沙丘、石质山坡及农田中。
                            该种的生命力极强，生根快。宜在向阳环境和疏松肥沃、排水良好的微碱性砂壤土生长，土壤要求疏松，富含有机质，含水量适中，pH值7左右。</p>
                        <p class="card-text">
                            向日葵的花语是信念、光辉、高傲、忠诚、爱慕，寓意是沉默的爱，代表着勇敢地去追求自己想要的幸福。向日葵的花姿虽然没有玫瑰那么浪漫，没有百合那么纯净，但阳光、明亮，爱得坦坦荡荡，爱得不离不弃，有着属于自己的独特魅力，而且绽放的不仅是爱情，还有对梦想、对生活的热爱。</p>
                        <img src="static/imges/flower/向日葵/向日葵.jpg" class="img-fluid" width="300px" height="300px">
                    </div>
                </div>
            </div>

            <%--第4项康乃馨--%>
            <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                <div class="card">
                    <div class="card-header"><h2>康乃馨</h2></div>
                    <div class="card-body">
                        <p class="card-title">多年生草本，高40~70厘米，全株无毛，粉绿色。茎丛生，直立，基部木质化，上部稀疏
                            分枝。叶片线状披针形，长4~14厘米，宽2~4毫米，顶端长渐尖，基部稍成短鞘，中脉明显，上面下凹，下面稍凸起。花常单生枝端，
                            有时2或3朵，有香气，粉红、紫红或白色；花梗短于花萼；苞片4（~6），宽卵形，顶端短凸尖，长达花萼1/4；花萼圆筒形，
                            长2.5~3厘米，萼齿披针形，边缘膜质；瓣片倒卵形，顶缘具不整齐齿；雄蕊长达喉部；花柱伸出花外。蒴果卵球形，稍短于宿存萼。花期5~8月，果期8~9月</p>
                        <p>康乃馨，大部分代表了爱，魅力和尊敬之情，红色代表了爱和关怀。粉红色康乃馨传说是圣母玛利亚看到耶稣受到苦难流下伤心的泪水，
                            眼泪掉下的地方就长出来康乃馨，因此粉红康乃馨成为了不朽的母爱的象征。与玫瑰所不同的，康乃馨代表的爱表现为比较清淡和温馨，适于形容亲情之爱，所以儿女多献康乃馨给自己的双亲。</p>
                        <img src="static/imges/flower/康乃馨/康乃馨粉色1.jpg" class="img-fluid" width="300px" height="270px">
                        <img src="static/imges/flower/康乃馨/康乃馨紫色边1.jpg" alt="" width="300px" height="200px">
                        <img src="static/imges/flower/康乃馨/康乃馨红色1.jpg" alt="" width="300px" height="200px">
                    </div>
                </div>
            </div>

            <%--第5项勿忘我--%>
            <div class="tab-pane fade" id="forget" role="tabpanel" aria-labelledby="v-pills-settings-tab">

                <div class="card">
                    <div class="card-header"><h2>勿忘我</h2></div>
                    <div class="card-body">
                        <p class="card-title">勿忘草（学名：Myosotis silvatica Ehrh. ex
                            Hoffm.）又名勿忘我，为管状花目、紫草科、勿忘草属植物。多年生草本，茎直立，高20-45厘米，基生叶和茎下部叶有柄，狭倒披针形、长圆状披针形或线状披针形，花序在花期短，花后伸长，花冠蓝色，小坚果卵形，暗褐色，平滑，有光泽。
                            勿忘草适应力强，喜干燥、凉爽的气候，忌湿热，喜光，耐旱，生长适温20-25℃，适合在疏松、肥沃、排水良好的微碱性土壤中生长。勿忘草产于我国大部分地区，欧洲以及伊朗、苏联、巴基斯坦、印度和克什米尔地区也有分布，常生于山地林缘或林下、山坡或山谷草地等处。</p>
                        <img src="static/imges/flower/勿忘我/勿忘我粉色.jpg"  width="300px" height="200px">
                        <img src="static/imges/flower/勿忘我/勿忘我紫色1.jpg" alt="" width="300px" height="200px">
                        <img src="static/imges/flower/勿忘我/勿忘我紫色1.jpg" alt="" width="300px" height="200px">
                    </div>
                </div>
            </div>

            <%--第6项风信子--%>
            <div class="tab-pane fade" id="Hyacinth" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                <div class="card">
                    <div class="card-header"><h2>风信子</h2></div>
                    <div class="card-body">
                        <p class="card-title">风信子（学名：Hyacinthus orientalis L.）：是多年草本球根类植物，鳞茎卵形，有膜质外皮，皮膜颜色与花色成正相关，未开花时形如大蒜，原产地中海沿岸及小亚细亚一带，是研究发现的会开花的植物中最香的一个品种。喜阳光充足和比较湿润的生长环境，要求排水良好和肥沃的沙壤土等。
                            全世界风信子的园艺品种约有2000种以上，主要分为“荷兰种”和“罗马种”两类。前者属正宗品种，绝大多数每株只长1支花葶，体势粗壮，花朵较大。而后者则多是变异的杂种，每株能着生二三支花葶，体势幼弱，花朵较细，多数消费者喜购荷兰风信子。</p>
                        <img src="static/imges/flower/风信子/风信子白色1.jpg" class="img-fluid" width="300px" height="270px">
                        <img src="static/imges/flower/风信子/风信子粉色1.jpg" alt="" width="300px" height="200px">
                        <img src="static/imges/flower/风信子/风信子紫色1.jpg" alt="" width="300px" height="200px">
                    </div>
                </div>
            </div>

            <%--第7项桔梗花--%>
            <div class="tab-pane fade" id="grandiflorum" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                <div class="card">
                    <div class="card-header"><h2>桔梗</h2></div>
                    <div class="card-body">
                        <p class="card-title">桔梗（Platycodon grandiflorus），别名包袱花、铃铛花、僧帽花，是多年生草本植物，茎高20～120厘米，通常无毛，偶密被短毛，不分枝，极少上部分枝。叶全部轮生，部分轮生至全部互生，无柄或有极短的柄，叶片卵形，卵状椭圆形至披针形，叶子卵形或卵状披针形，花暗蓝色或暗紫白色，可作观赏花卉；其根可入药，有止咳祛痰、宣肺、排脓等作用，中医常用药。在中国东北地区常被腌制为咸菜，在朝鲜半岛被用来制作泡菜，当地民谣《桔梗谣》所描写的就是这种植物。单凭名称，有人会误以为桔梗乃桔子的梗，但实际上与桔子或柑橘属没有直接关系。</p>
                        <img src="static/imges/flower/桔梗/桔梗花1.jpg"  width="300px" height="200px">
                        <img src="static/imges/flower/风信子/风信子粉色1.jpg" alt="" width="300px" height="200px">
                        <img src="static/imges/flower/风信子/风信子紫色1.jpg" alt="" width="300px" height="200px">
                    </div>
                </div>
            </div>

            <%--第8项绣球花--%>
            <div class="tab-pane fade" id="hydrangeas" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                <div class="card">
                    <div class="card-header"><h2>绣球花</h2></div>
                    <div class="card-body">
                        <p class="card-title">
                            绣球，为虎耳草科绣球属植物。灌木，高1-4米；茎常于基部发出多数放射枝而形成一圆形灌丛；枝圆柱形。叶纸质或近革质，倒卵形或阔椭圆形。伞房状聚伞花序近球形，直径8-20厘米，具短的总花梗，花密集，粉红色、淡蓝色或白色；花瓣长圆形，长3-3.5毫米。蒴果未成熟，长陀螺状；种子未熟。花期6-8月。
                            绣球花花型丰满，大而美丽，其花色能红能蓝，令人悦目怡神，是常见的盆栽观赏花木。中国栽培绣球的时间较早，在明、清时代建造的江南园林中都栽有绣球。20世纪初建设的公园也离不开绣球的配植。现代公园和风景区都以成片栽植，形成景观。
                        </p>
                        <img src="static/imges/flower/绣球花/绣球花粉色1.jpg" class="img-fluid" width="300px" height="200px">
                        <img src="static/imges/flower/绣球花/绣球花紫色1.jpg" alt="" width="300px" height="200px">
                        <img src="static/imges/flower/绣球花/绣球花蓝色1.jpg" alt="" width="300px" height="200px">
                    </div>
                </div>
            </div>

            <%--第9项木棉花--%>
            <div class="tab-pane fade" id="Kapok" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                <div class="card">
                    <div class="card-header"><h2>木棉花</h2></div>
                    <div class="card-body">
                        <p class="card-title">
                            木棉花，中药名。为木棉科植物木棉Gossampinus malabarica (DC.)Merr.的干燥花。春季花盛开时采收，除去杂质，晒干。
                        </p>
                        <img src="static/imges/flower/木棉花/木棉花红色1.jpg" class="img-fluid" width="300px" height="200px">
                        <img src="static/imges/flower/木棉花/白木棉花1.jpg" alt="" width="300px" height="200px">
                        <img src="static/imges/flower/绣球花/绣球花蓝色1.jpg" alt="" width="300px" height="200px">
                    </div>
                </div>
            </div>

            <%--第10项水仙花--%>
            <div class="tab-pane fade" id="narcissus" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                <div class="card">
                    <div class="card-header"><h2>水仙花</h2></div>
                    <div class="card-body">
                        <p class="card-title">
                            水仙（Narcissus tazetta L. var. chinensis Roem.）：又名中国水仙，是多花水仙的一个变种。是石蒜科多年生草本植物。水仙的叶由鳞茎顶端绿白色筒状鞘中抽出花茎（俗称箭）再由叶片中抽出。一般每个鳞茎可抽花茎1～2枝，多者可达8～11枝，伞状花序。花瓣多为6片，花瓣末处呈鹅黄色。花蕊外面有一个如碗一般的保护罩。鳞茎卵状至广卵状球形，外被棕褐色皮膜。叶狭长带状，蒴果室背开裂。花期春季。
                            水仙性喜温暖、湿润、排水良好。在中国已有一千多年栽培历史，为传统观赏花卉，是中国十大名花之十。
                            水仙鳞茎多液汁，有毒，含有石蒜碱、多花水仙碱等多种生物碱；外科用作镇痛剂；鳞茎捣烂敷治痈肿。牛羊误食鳞茎，立即出现痉挛、瞳孔放大、暴泻等。
                        </p>
                        <img src="static/imges/flower/水仙花/水仙花1.jpg" width="300px" height="200px">
                        <img src="static/imges/flower/水仙花/水仙花1.jpg" alt="" width="300px" height="200px">
                        <img src="static/imges/flower/水仙花/水仙花1.jpg" alt="" width="300px" height="200px">
                    </div>
                </div>
            </div>

            <%--第11项绿植--%>

            <div class="tab-pane fade" id="ff" role="tabpanel" aria-labelledby="v-pills-settings-tab">

                <div class="card">
                    <div class="card-header"><h2>绿植</h2></div>
                    <div class="card-body">
                        <h3>富贵竹</h3>
                        <p class="card-title">
                            富贵竹（学名：Dracaena sanderiana Sander），为龙舌兰科、龙血树属的为多年生常绿小乔木观叶植物。植株细长，直立上部有分枝。根状茎横走，结节状；茎干粗壮、直立，株态玲珑。叶互生或近对生，叶长披针形，有明显主脉，叶片浓绿色。伞形花序有花3-10朵生于叶腋或与上部叶对花，花冠钟状，紫色。浆果近球球，黑色。 [1]
                            富贵竹原产于加利群岛及非洲和亚洲热带地区，自20世纪80年代后期大量引进中国。一般多用于家庭瓶插或盆栽护养，特别是从台湾流传而来的“塔状”造型，又名“开运竹”，观赏价值高。中国有“花开富贵，竹报平安”的祝辞，由于富贵竹茎叶纤秀，柔美优雅，极富竹韵，故而很得人们喜爱。
                        </p>
                        <img src="static/imges/flower/木棉花/木棉花红色1.jpg" class="img-fluid" width="300px" height="200px">
                        <img src="static/imges/flower/木棉花/白木棉花1.jpg" alt="" width="300px" height="200px">
                        <img src="static/imges/flower/绣球花/绣球花蓝色1.jpg" alt="" width="300px" height="200px">
                    </div>
                    <div class="card-body">
                        <h3>多肉</h3>
                        <p class="cart-title">
                            多肉植物（succulent plant）是指植物的根、茎、叶三种营养器官中叶是肥厚多汁并且具备储藏大量水分功能的植物，也称“多浆植物”。其至少具有一种肉质组织这种组织是一种活组织，除其他功能外，它能储藏可利用的水，在土壤含水状况恶化、植物根系不能再从土壤中吸收和提供必要的水分时，它能使植物暂时脱离外界水分供应而独立生存。据粗略统计，全世界共有多肉植物一万余种，在分类上隶属100余科，多肉还能净化空气。
                        </p>
                    </div>
                </div>
            </div>

            <%--第12项其他--%>
            <div class="tab-pane fade" id="dd" role="tabpanel" aria-labelledby="v-pills-settings-tab">

                <div class="card">
                    <div class="card-header"><h2>其他</h2></div>
                    <div class="card-body">
                        <p class="card-title">
                            木棉花，中药名。为木棉科植物木棉Gossampinus malabarica (DC.)Merr.的干燥花。春季花盛开时采收，除去杂质，晒干。
                        </p>
                        <img src="static/imges/flower/木棉花/木棉花红色1.jpg" class="img-fluid" width="300px" height="200px">
                        <img src="static/imges/flower/木棉花/白木棉花1.jpg" alt="" width="300px" height="200px">
                        <img src="static/imges/flower/绣球花/绣球花蓝色1.jpg" alt="" width="300px" height="200px">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="foot">
    <br/>
    <p>联系方式：8888888888 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 联系地址：xxxxxxxxxxx</p>

</div>
</body>
<script src="static/js/jquery-3.4.1.js"></script>
<script src="static/js/tab.js"></script>
<script>
    $(function () {
        $('#v-pills-tab a').on('click', function (e) {
            e.preventDefault();
            $(this).tab('show');
        })
    })
</script>
</html>
